<template>
  <div class="learning-progress-page">
    <div class="page-header">
      <h2>学习进度</h2>
      <p>跟踪您的学习进度和成就</p>
    </div>

    <!-- 学习统计概览 -->
    <div class="stats-overview">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Calendar /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ learningStats.totalDays }}</h3>
            <p>学习天数</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ learningStats.totalHours }}</h3>
            <p>学习时长(小时)</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><VideoPlay /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ learningStats.completedLessons }}</h3>
            <p>完成课程</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <el-icon><Trophy /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ learningStats.achievementPoints }}</h3>
            <p>成就点数</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 课程进度列表 -->
    <div class="courses-section">
      <div class="section-header">
        <h3>我的课程</h3>
        <div class="filter-controls">
          <el-select v-model="selectedStatus" placeholder="筛选状态" style="width: 120px;">
            <el-option label="全部" value="all" />
            <el-option label="进行中" value="in-progress" />
            <el-option label="已完成" value="completed" />
            <el-option label="未开始" value="not-started" />
          </el-select>
        </div>
      </div>

      <div class="courses-grid">
        <div v-for="course in filteredCourses" :key="course.id" class="course-card">
          <div class="course-header">
            <div class="course-image">
              <img :src="course.image" :alt="course.name" />
              <div class="course-overlay">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="continueLearning(course)"
                  v-if="course.status === 'in-progress'"
                >
                  继续学习
                </el-button>
                <el-button 
                  type="success" 
                  size="small" 
                  @click="startLearning(course)"
                  v-else-if="course.status === 'not-started'"
                >
                  开始学习
                </el-button>
                <el-button 
                  type="info" 
                  size="small" 
                  @click="reviewCourse(course)"
                  v-else
                >
                  复习课程
                </el-button>
              </div>
            </div>
            <div class="course-info">
              <h4>{{ course.name }}</h4>
              <p>{{ course.description }}</p>
              <div class="course-meta">
                <span class="meta-item">
                  <el-icon><Clock /></el-icon>
                  {{ course.duration }}
                </span>
                <span class="meta-item">
                  <el-icon><Document /></el-icon>
                  {{ course.lessons }} 课时
                </span>
                <span class="meta-item">
                  <el-icon><User /></el-icon>
                  {{ course.instructor }}
                </span>
              </div>
            </div>
          </div>
          
          <div class="course-progress">
            <div class="progress-header">
              <span>学习进度</span>
              <span>{{ course.progress }}%</span>
            </div>
            <el-progress 
              :percentage="course.progress" 
              :color="getProgressColor(course.progress)"
              :stroke-width="8"
            />
            <div class="progress-details">
              <span>已完成 {{ course.completedLessons }}/{{ course.totalLessons }} 课时</span>
              <span class="last-study" v-if="course.lastStudyTime">
                最后学习: {{ course.lastStudyTime }}
              </span>
            </div>
          </div>
          
          <div class="course-status">
            <el-tag :type="getStatusType(course.status)">
              {{ getStatusText(course.status) }}
            </el-tag>
            <div class="course-actions">
              <el-button type="text" @click="viewCourseDetail(course)">
                课程详情
              </el-button>
              <el-button type="text" @click="downloadMaterials(course)">
                下载资料
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习日历 -->
    <div class="calendar-section">
      <div class="section-header">
        <h3>学习日历</h3>
        <p>查看您的学习记录和计划</p>
      </div>
      
      <div class="calendar-container">
        <el-calendar v-model="currentDate">
          <template #dateCell="{ data }">
            <div class="calendar-cell">
              <span>{{ data.day.split('-').slice(2).join('') }}</span>
              <div v-if="getStudyRecord(data.day)" class="study-indicator">
                <el-icon><Check /></el-icon>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>

    <!-- 学习成就 -->
    <div class="achievements-section">
      <div class="section-header">
        <h3>学习成就</h3>
        <p>您的学习里程碑和成就</p>
      </div>
      
      <div class="achievements-grid">
        <div v-for="achievement in achievements" :key="achievement.id" class="achievement-card">
          <div class="achievement-icon" :class="{ unlocked: achievement.unlocked }">
            <el-icon :size="40">
              <component :is="achievement.icon" />
            </el-icon>
          </div>
          <div class="achievement-content">
            <h4>{{ achievement.name }}</h4>
            <p>{{ achievement.description }}</p>
            <div class="achievement-progress" v-if="!achievement.unlocked">
              <el-progress 
                :percentage="achievement.progress" 
                :stroke-width="4"
                :show-text="false"
              />
              <span class="progress-text">{{ achievement.progress }}%</span>
            </div>
            <el-tag v-else type="success" size="small">已获得</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Calendar, 
  Clock, 
  VideoPlay, 
  Trophy, 
  Document, 
  User, 
  Check,
  Star,
  Target,
  Fire
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 学习统计数据
const learningStats = ref({
  totalDays: 15,
  totalHours: 45,
  completedLessons: 23,
  achievementPoints: 1250
})

// 筛选状态
const selectedStatus = ref('all')

// 当前日期
const currentDate = ref(new Date())

// 课程数据
const courses = ref([
  {
    id: 1,
    name: 'JFT BASIC 基础课程',
    description: '日语基础语法和词汇学习',
    image: 'https://via.placeholder.com/120x80/409EFF/FFFFFF?text=JFT',
    duration: '30小时',
    lessons: 20,
    totalLessons: 20,
    completedLessons: 15,
    instructor: '田中老师',
    progress: 75,
    status: 'in-progress',
    lastStudyTime: '2024-01-15'
  },
  {
    id: 2,
    name: '特定技能 食品加工',
    description: '食品加工专业技能培训',
    image: 'https://via.placeholder.com/120x80/67C23A/FFFFFF?text=食品',
    duration: '40小时',
    lessons: 25,
    totalLessons: 25,
    completedLessons: 10,
    instructor: '山田老师',
    progress: 40,
    status: 'in-progress',
    lastStudyTime: '2024-01-14'
  },
  {
    id: 3,
    name: '面试技巧培训',
    description: '日本企业面试准备和技巧',
    image: 'https://via.placeholder.com/120x80/E6A23C/FFFFFF?text=面试',
    duration: '15小时',
    lessons: 10,
    totalLessons: 10,
    completedLessons: 10,
    instructor: '佐藤老师',
    progress: 100,
    status: 'completed',
    lastStudyTime: '2024-01-10'
  },
  {
    id: 4,
    name: 'JLPT N3 备考课程',
    description: 'JLPT N3级考试备考',
    image: 'https://via.placeholder.com/120x80/F56C6C/FFFFFF?text=N3',
    duration: '50小时',
    lessons: 30,
    totalLessons: 30,
    completedLessons: 0,
    instructor: '铃木老师',
    progress: 0,
    status: 'not-started',
    lastStudyTime: null
  }
])

// 成就数据
const achievements = ref([
  {
    id: 1,
    name: '学习新手',
    description: '完成第一门课程',
    icon: 'Star',
    unlocked: true,
    progress: 100
  },
  {
    id: 2,
    name: '坚持不懈',
    description: '连续学习7天',
    icon: 'Fire',
    unlocked: true,
    progress: 100
  },
  {
    id: 3,
    name: '学习达人',
    description: '完成10门课程',
    icon: 'Trophy',
    unlocked: false,
    progress: 60
  },
  {
    id: 4,
    name: '考试专家',
    description: '通过5次考试',
    icon: 'Target',
    unlocked: false,
    progress: 40
  }
])

// 筛选课程
const filteredCourses = computed(() => {
  if (selectedStatus.value === 'all') {
    return courses.value
  }
  return courses.value.filter(course => course.status === selectedStatus.value)
})

// 获取进度颜色
const getProgressColor = (progress) => {
  if (progress >= 80) return '#67C23A'
  if (progress >= 60) return '#E6A23C'
  if (progress >= 40) return '#409EFF'
  return '#F56C6C'
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 'completed': return 'success'
    case 'in-progress': return 'warning'
    case 'not-started': return 'info'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成'
    case 'in-progress': return '进行中'
    case 'not-started': return '未开始'
    default: return '未知'
  }
}

// 获取学习记录
const getStudyRecord = (date) => {
  // 模拟学习记录数据
  const studyDates = ['2024-01-15', '2024-01-14', '2024-01-13', '2024-01-12', '2024-01-11']
  return studyDates.includes(date)
}

// 课程操作方法
const continueLearning = (course) => {
  ElMessage.info('继续学习功能开发中，即将跳转到学习页面')
  // 暂时跳转到首页
  router.push('/')
}

const startLearning = (course) => {
  ElMessage.info('开始学习功能开发中，即将跳转到学习页面')
  // 暂时跳转到首页
  router.push('/')
}

const reviewCourse = (course) => {
  ElMessage.info('复习课程功能开发中，即将跳转到学习页面')
  // 暂时跳转到首页
  router.push('/')
}

const viewCourseDetail = (course) => {
  ElMessage.info('课程详情功能开发中')
  // 暂时跳转到首页
  router.push('/')
}

const downloadMaterials = (course) => {
  // 模拟下载功能
  console.log('下载课程资料:', course.name)
}
</script>

<style scoped>
.learning-progress-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h2 {
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-size: 2rem;
}

.page-header p {
  color: #666;
  margin: 0;
  font-size: 1.1rem;
}

.stats-overview {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  font-size: 2.5rem;
  color: #409EFF;
}

.stat-content h3 {
  margin: 0 0 5px 0;
  font-size: 2rem;
  color: #2c3e50;
}

.stat-content p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.courses-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
}

.course-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-2px);
}

.course-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.course-image {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.course-image:hover .course-overlay {
  opacity: 1;
}

.course-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.course-info p {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.course-meta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #666;
}

.course-progress {
  margin-bottom: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #666;
}

.progress-details {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #999;
}

.course-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-actions {
  display: flex;
  gap: 10px;
}

.calendar-section {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.calendar-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.calendar-cell {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.study-indicator {
  position: absolute;
  bottom: 2px;
  color: #67C23A;
  font-size: 0.8rem;
}

.achievements-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.achievement-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  align-items: center;
}

.achievement-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  flex-shrink: 0;
}

.achievement-icon.unlocked {
  background: #67C23A;
  color: white;
}

.achievement-content {
  flex: 1;
}

.achievement-content h4 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 1rem;
}

.achievement-content p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 0.9rem;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-text {
  font-size: 0.8rem;
  color: #666;
  min-width: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
  
  .course-header {
    flex-direction: column;
    text-align: center;
  }
  
  .course-image {
    width: 100%;
    height: 150px;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
</style> 